import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button } from 'antd'
import echarts from 'echarts'
import { mapColor } from 'lib/fun'

const option = {
        color: mapColor(),
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['50%', '50%'],
                data:[
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }


class ModuleName extends Component {
    constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }

  componentDidMount(){
    this.chart = echarts.init(document.getElementsByClassName(this.props.setClass)[0]);
    this.chart.setOption(option);
  
    window.addEventListener('resize', this.handleResize); 
  }

  handleResize = (e)=>{
    this.chart.resize();
  }
  
  componentWillUnmount() {  
    window.removeEventListener('resize', this.handleResize);  
  }

  componentWillReceiveProps(nextProps){
    if(nextProps.common.user&&nextProps.common.user.user&&this.state.treeData.length == 0){
      this.loadArea(nextProps.common.user.user.areaId);
    }
  }

  fun = () => {
    
  }
  
  render() {

    return (
      <Spin spinning={this.state.loading}>
          <div className={this.props.setClass} style={{height: 300}}></div>
      </Spin>
    )
  }
}

module.exports = ModuleName
